<template>
  <div class="classification-list">
    <div class="breadClum">
      <span>
        <router-link :to="{path:'/pageIndex'}"><a class="bread1">当前位置：首页  >  </a></router-link>
        <router-link :to="{path:'/controlBuild/'}"> <a class="bread2">内控建设  ></a></router-link>
        <a class="bread2">资料分类</a>
      </span>
    </div>
    <div class="navList">
      <el-button type="primary" @click="addData">添加分类</el-button>
    </div>

    <el-table
      ref="dataListTable"
      :data="classificationTableList"
      stripe
      :row-style="showRow"
      @selection-change="handleSelectionChange"
      style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        label="分类编号"
        prop="dacate_num">
      </el-table-column>
      <el-table-column
        label="分类名称">
        <el-table-column
          label="一级分类">
          <template slot-scope="scope">
               <span @click.stop="toggleExpanded(scope.$index)" v-if="scope.row.first_process.dacate_name!=''"
                     class="lc-text">
                 <img src="../../static/images/add.png" v-if="!scope.row._expanded && iconShow(scope.$index,scope.row)">
                 <img src="../../static/images/reduce.png" v-else>
                 <span>{{scope.row.first_process.dacate_name}}</span>
              </span>
          </template>
        </el-table-column>
        <el-table-column
          label="二级分类">
          <template slot-scope="scope">
               <span @click.stop="toggleExpanded(scope.$index)" v-if="scope.row.second_process.dacate_name!='' "
                     class="lc-text">
                 <img src="../../static/images/add.png" v-if="!scope.row._expanded&&iconShow(scope.$index,scope.row)">
                 <img src="../../static/images/reduce.png" alt="" v-else>
                 <span>{{scope.row.second_process.dacate_name}}</span>
              </span>
          </template>
        </el-table-column>
        <el-table-column
          label="三级分类">
          <template slot-scope="scope">
               <span @click.stop="toggleExpanded(scope.$index)" v-if='scope.row.third_process.dacate_name'
                     class="lc-text">
                 <img src="../../static/images/add.png" v-if="!scope.row._expanded && iconShow(scope.$index,scope.row)">
                 <img src="../../static/images/reduce.png" alt="" v-else>
                 <span>{{scope.row.third_process.dacate_name}}</span>
                </span>
          </template>
        </el-table-column>
        <el-table-column
          label="四级分类">
          <template slot-scope="scope">
               <span @click.stop="toggleExpanded(scope.$index)" v-if='scope.row.fourth_process.dacate_name'
                     class="lc-text">
                 <img src="../../static/images/add.png" v-if="!scope.row._expanded && iconShow(scope.$index,scope.row)">
                 <img src="../../static/images/reduce.png" alt="" v-else>
                 <span>{{scope.row.fourth_process.dacate_name}}</span>
                </span>
          </template>
        </el-table-column>
        <el-table-column
          label="五级分类">
          <template slot-scope="scope">
               <span @click.stop="toggleExpanded(scope.$index)" v-if='scope.row.fifth_process.dacate_name'
                     class="lc-text">
                 <img src="../../static/images/add.png" v-if="!scope.row._expanded && iconShow(scope.$index,scope.row)">
                 <img src="../../static/images/reduce.png" alt="" v-else>
                 <span>{{scope.row.fifth_process.dacate_name}}</span>
                </span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column
        prop="dacate_desc"
        label="分类描述"
        width="300px">
      </el-table-column>
      <el-table-column
        label="状态"
        width="124px;">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.dacate_state"
            @change="switchRow(scope.$index)"
            active-value="1"
            inactive-value="0"
            active-color="#efba12"
            inactive-color="#dddddd">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="leader_identify"
        label="操作"
        width="170px;">
        <template slot-scope="scope">
          <span style="cursor: pointer;color:#2c63be" @click="editClassification(scope.$index,scope.row)">编辑</span>
          <span style="cursor: pointer;color:#2c63be" @click="deleteRow(scope.$index,scope.row)">删除</span>
        </template>
      </el-table-column>

      <el-table-column></el-table-column>
    </el-table>
    <div class="e-table-footer">
      <div class="e-selectAll">
        <el-checkbox  @change = "selectAll"></el-checkbox>
      </div>
      <div class="e-selectText">
        <span>全选</span>
        <span class="e-del" @click.stop="deleteBtn">删除</span>
      </div>
    </div>
    <!--添加资料-->
    <el-dialog
      :title="title"
      :visible.sync="addDataIng"
      width="580px">
      <el-form
        :model="addDataForm"
        ref="addDataForm"
        label-width="20%"
        style="min-width: 510px;">
        <el-form-item label="分类名称" :rules="[ { required: true, message:'请输入分类名称', trigger: 'blur' }]">
          <el-input type="text" v-model="addDataForm.dacate_name"></el-input>
        </el-form-item>
        <el-form-item label="分类描述" :rules="[ { required: true, message:'请输入分类描述', trigger: 'blur' }]">
          <el-input style="width:88%;" type="textarea" :rows="2" v-model="addDataForm.dacate_desc"></el-input>
        </el-form-item>
        <el-form-item label="上级分类" :rules="[ { required: true, message:'请输入活动名称', trigger: 'blur' }]">
          <el-select v-model="addDataForm.dacate_pid">
            <el-option :label="item.dacate_name" :value="item.dacate_id" v-for="(item,index) in list" :key="index"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDataIng = false">取 消</el-button>
        <el-button type="primary" @click="addSubmit('addDataForm')">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import {treeToArraysDacate} from '@/page/test/catalog.js'
  import {
    strToHexCharCode,
    toFixedBit,
    dec2hex,
    formatTime,
    getNewDate
  } from "@/utils/index.js";

  export default ({
    components: {},
    data() {
      return {
        dataList: [],
        addDataIng: false,
        addDataForm: {
          dacate_name:'',
          dacate_desc:'',
          dacate_pid:''
        },
        title:'添加分类',
        list:[],
        isAddOrModify:0, //0  为添加  1 为修改
        multipleSelection:[],
        current_dacate_id:''
      }
    },
    created() {
      this.getClassificationList();

      console.log(this.allClassificationTableList)

    },
    computed: {
      ...mapState({
        company_names: state => state.app.loginState.company_name || localStorage.getItem('company_name'),
        company_ids: state => state.app.loginState.company_id || localStorage.getItem('company_id')
      }),
      classificationTableList: function () {
        let tmp;
        console.log('XXXXXXXXXXXXXXXXXXXXXXXX')
        if (!Array.isArray(this.dataList)) {
          tmp = [this.dataList]
        } else {
          tmp = this.dataList
        }
        const func = this.evalFunc || treeToArraysDacate
        // 'son_dacate'
        const args = this.evalArgs ? Array.concat([tmp, this.expandAll], this.evalArgs) : [tmp, this.expandAll]
        console.log(args)
        console.log(func.apply(null, args))
        return func.apply(null, args)
      }


    },
    methods: {
      selectAll(){
        this.$refs.dataListTable.toggleAllSelection();
      },
      handleSelectionChange(val){
        console.log(val)
        this.multipleSelection = val;
      },
      // 切换下级是否展开
      toggleExpanded: function(trIndex) {
        const record = this.classificationTableList[trIndex]
        console.log('xxxxxxxxxxxxxxxxx')
        record._expanded = !record._expanded
      },
      //点击展开或者收缩  触发表格展开或收缩
      showRow: function(row) {
        const show = (row.row.parent ? (row.row.parent._expanded && row.row.parent._show) : true)
        row.row._show = show
        return show ? 'animation:treeTableShow 1s;-webkit-animation:treeTableShow 1s;' : 'display:none;'
      },
      // 图标显示
      iconShow(index, record) {
        // console.log(record.son_dacate && record.son_dacate.length > 0)
        return ( record.son_dacate && record.son_dacate.length > 0)
      },
      //添加分类
      addData() {
        this.title = "添加分类";
        console.log(this.classificationTableList)
        this.creatClassifyList();
        this.addDataIng = true
      },
      //增加分类   确定
      addSubmit(addDataForm) {
        this.$refs[addDataForm].validate((valid) => {
          if (valid) {
            if(this.isAddOrModify == 0){
              //添加分类
              this.addClassification(this.addDataForm).then(res=>{
                this.$alert(res.data.message,"提示");
                if(res.data.code==0){
                  this.addDataForm ={
                      dacate_name:'',
                      dacate_desc:'',
                      dacate_pid:''
                  },
                  this.getClassificationList()
                }
              })
              this.addDataIng = false

            }else if(this.isAddOrModify == 1){
              //编辑分类
              this.editItem(this.current_dacate_id,this.addDataForm).then(res=>{
                this.$alert(res.data.message)
                if(res.data.code==0){
                  this.isAddOrModify = 0;

                  this.getClassificationList()
                  this.addDataIng = false
                }
              })
            }

          } else {
            this.$alert('表单数据不完整，请认真审核！', '提示')
            return false;
          }

        });

      },
      //编辑 分类信息
      editClassification(index,row){
        console.log(index)
        console.log(row)
        if(row.son_dacate && row.son_dacate.length>0){
          //此时存在子级分类 不允许编辑
          this.$alert("此分类下有子级分类，不允许直接删除，请先删除子级分类！","提示")
        }else{
          this.title = "编辑分类";
          this.creatClassifyList();
          this.isAddOrModify = 1;

          this.getDetails(row.dacate_id).then(res=>{
            console.log(res)
            if(res.data.code==0){
              this.current_dacate_id = res.data.data.dacate_id
              this.addDataForm = {
                dacate_name:res.data.data.dacate_name,
                dacate_desc:res.data.data.dacate_desc,
                dacate_pid:res.data.data.dacate_pid
              }
            }

          })


          this.addDataIng = true
        }


      },
      //改变每条数据是否展示
      switchRow(index){
        console.log(this.classificationTableList[index])
        this.editItem(this.classificationTableList[index].dacate_id,{
          datum_id:this.classificationTableList[index].dacate_id,
          update_state:"confirm"
        }).then(res=>{
          this.$alert(res.data.message,"提示")
        }).then(()=>{
          this.getClassificationList()
        })
      },
      //删除一行
      deleteRow(index){
        console.log(index)
        console.log(this.classificationTableList[index])

        this.deleteItem(this.classificationTableList[index].dacate_id).then(res=>{
          this.$alert(res.data.message,"提示")
          if(res.data.code==0){
            this.getClassificationList()
          }
        })
      },
      //删除多个文件
      deleteBtn(){
        if( this.multipleSelection.length == 0){
          this.$alert('请选择要删除的资料',"提示")
        }else {
          var temp_dacate_id ='';
          this.multipleSelection.forEach(el=>{
            temp_dacate_id += el.dacate_id+","
          })
          this.deleteItem(temp_dacate_id).then(res=>{
            this.$alert(res.data.message,"提示")
            if(res.data.code==0){
              this.getClassificationList();
            }
          })
        }
      },
      getClassificationList() {
        //
        this.axios.get('/api/v1/build/datumcategory').then(res => {
          if (res.data.code == 0) {
            this.dataList = res.data.data;
            console.log(this.dataList)
          }

        })
      },
      //添加分类
      addClassification(data){
          return this.axios.post('/api/v1/build/datumcategory',data)
      },
      creatClassifyList(){
        var temp_arr = [];
        var process_arr = ['first_process','second_process','third_process','fourth_process','fifth_process'];

        this.classificationTableList.forEach(el=>{
          process_arr.forEach(element=>{
            if(el[element]["dacate_name"]!=''){
              console.log(el[element])
              temp_arr.push(Object.assign({},el[element],{
                dacate_id:el.dacate_id
              }))
            }
          })

        })
        console.log(temp_arr);

        this.list = [...temp_arr,{
          dacate_id: "0",
          dacate_name: "顶级分类",
          is_show: true
        }];
      },
      editItem(dacate_id,data){
        return this.axios.put('/api/v1/build/datumcategory/'+dacate_id,data)
      },
      getDetails(dacate_id){
        return this.axios.get('/api/v1/build/datumcategory/'+dacate_id)
      },
      //删除 一行或者多行
      deleteItem(dacate_id){
        return this.axios.delete('/api/v1/build/datumcategory/'+dacate_id,{
          datum_id:dacate_id
        })
      }

    }
  })
</script>
<style scoped="">
  .userMaIndex {
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
  }

  .userMaIndex .navList {
    padding-top:10px;
    margin-bottom: 12px;
  }

  .userMaIndex .el-table >>> th.is-leaf {
    background: #d3e9bb;
    height: 58px;
  }

  .userMaIndex .e-table-footer {
    background: #d3e9bb;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #aac983;
    border-right: 1px solid #aac983;
  }

  .userMaIndex .e-table-footer .e-selectAll {
    width: 55px;
    text-align: center;
    border-left: 1px solid #aac983;
    border-right: 1px solid #aac983;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    display: inline-block;
  }

  .userMaIndex .e-table-footer .e-selectText {
    display: inline-block;
    margin-left: 20px;
    color: #5d9120;
  }

  .userMaIndex .e-selectText .e-del {
    font-size: 16px;
    color: #fff;
    padding: 6px 20px;
    background: #f56c6c;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    margin-left: 30px;
    cursor: pointer;

  }


  .lc-text {
    overflow: hidden;
    position: relative;
  }
  .lc-text img{
    cursor: pointer;
    position: absolute;
    top:1px;
    left:-2px;
  }
 .lc-text span{
    margin-left: 20px;
  }


</style>
